<template>
  <div class="audition_list">
    <div class="common_bg" v-if="studentList.length !== 0"></div>
    <div class="container">
      <div class="class_card card">
        <!-- <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        > -->
          <van-cell class="card_cell" is-link @click="(e) => toUpdateAudition(item, e)" v-for="(item, index) in studentList" :key="index">
            <!-- <i class="icon_class"></i> -->
            <span class="card_name">{{item.productName.join(',')}}</span>
            <van-divider />

            <div class="class_box">
              <div class="left">
                <!-- <i class="icon_position"></i> -->
                <div class="btn_code">试听课程码</div>
                <span class="school_name">{{item.schoolName}}</span>
              </div>
              <div class="right">
                <ul class="class_info_list">
                  <li class="class_info_item" style="width: 100%">时间 : {{item.classStartTime}}</li>
                  <!-- <li class="class_info_item">教室 : {{item.classRoomName}}</li> -->
                  <li class="class_info_item">教师 : {{item.employeesName}}</li>
                  <li class="class_info_item">容纳学员 : {{item.accommodateStudent}}人</li>
                  <li class="class_info_item">已安排学员 : {{item.arrangeStudent}}人</li>
                </ul>
              </div>
            </div>
          </van-cell>
        <!-- </van-list> -->
      </div>

      <div v-if="studentList.length == 0" class="noData">
        <img src="../../../assets/img/nodata.png" alt="">
        <p>暂时还没有数据</p>
        <p>快来手动添加吧</p>
        <span class="addData" @click="addAudition">添加</span>
      </div>
    </div>

    <div class="btn_add btn_circle"  @click="addAudition" v-if="studentList.length !== 0">
      <i></i>
    </div>

    <div class="icon_place" @click="screenList.showSearch = true"></div>

    <!-- 试听课二维码 -->
    <van-popup v-model="showQrCode" class="qrcode_pop">
      <div class="code_bg">
        <span class="txt1">老师讲课怎么样？</span>
        <span class="txt2">扫码留下你的点评吧！</span>
        <span class="txt3">二维码生成</span>
        <img :src="`http://qr.liantu.com/api.php?&w=230&logo=http://www.mingxiaoclub.cn/zebraOnline/img/icon_share.png&text=${linkUrl}`" class="qrcode" alt="">
        <!-- <img src="http://qr.liantu.com/api.php?bg=f3f3f3&fg=ff0000&gc=222222&el=l&w=200&m=10&text=https://www.baidu.com/?model=0%26type=listenToTheClass%26schoolId=d4685f23bd5c4882aaef699b7b78330b%26workNo=191216079"/> -->
        <div class="btn_save">长按图片保存至相册</div>
      </div>
      <i class="icon_close2" @click="showQrCode=false"></i>
    </van-popup>

    <!-- 弹窗层 -->
      <div class="popup">
        <van-popup v-model="showBottomArea" position="bottom" :style="{ height: '40%' }">
          <van-datetime-picker
            v-if="showBottomAreaType == 'date'"
            v-model="currentDate"
            type="date"
            @cancel="onCancel"
            @confirm="onConfirm"
          />

          <van-picker
            v-else
            show-toolbar
            title="请选择"
            value-key="name"
            :columns="bottomAreaList"
            @cancel="onCancel"
            @confirm="onConfirm"
          />
        </van-popup>
      </div>

      <screen :screenList="screenList" :screenData="screenData" @reset="reset" @searchData="searchData" @schoolChange="schoolChange"></screen>
      
    <!-- 弹窗层 -->

  </div>
</template>

<style>

.audition_list .container .van-cell__right-icon {
  position: absolute;
  right: .266667rem;
}
.audition_list .container .van-cell {
  box-shadow: 0px 2px 4px 5px rgba(241,241,241,0.5);
  border-radius: .16rem;
}

.audition_list .container .van-cell__value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>
<style scoped>
.icon_close2{
  display: inline-block;
  width: 1.066667rem;
  height: 1.066667rem;
  background: url('../../../assets/img/icon_close2.png')0 0 no-repeat;
  background-size: contain;
  margin-top: .4rem;
}
.code_bg .btn_save {
  background:linear-gradient(236deg,rgba(255,152,83,1) 0%,rgba(255,151,151,1) 100%);
  width: 3.826667rem;
  height: .866667rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .4rem;
  margin-top: .25rem;
}
.code_bg .qrcode {
  width: 3.066667rem;
  height: 3.066667rem;
  margin-top: .173333rem;
}
.code_bg .txt1 {
  color: #FC8434;
  margin-top: 1.866667rem;
}
.code_bg .txt3 {
  color: #FC8434;
  margin-top: 1.5rem;
}
.code_bg .txt2 {
  color: #424242;
  margin-top: .293333rem;
}
.qrcode_pop {
  background: transparent !important;
  text-align: center;
}
.code_bg {
  width: 8.173333rem;
  height: 11.533333rem;
  background: url('../../../assets/img/code_bg.png') 0 0 no-repeat;
  background-size: contain;
  font-size: .373333rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.btn_code {
  width: 1.946667rem;
  height: .6rem;
  background:linear-gradient(236deg,rgba(255,152,83,1) 0%,rgba(255,151,151,1) 100%);
  box-shadow:0px 0px 4px 2px rgba(190,189,189,0.5);
  border-radius: .306667rem;
  font-size: .293333rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.audition_list .class_card .card_cell {
  margin-bottom: .266667rem;
}

.audition_list .container {
  position: relative;
}

.audition_list .container .van-cell {
  padding: 15px 6px;
}
.audition_list .card_name {
  font-size: .426667rem;
  color: #FC8434;
  margin-right: .566667rem;
  margin-left: .346667rem;
}


.audition_list .class_box {
  display: flex;
  width: 100%;
  padding: .533333rem 0;
}

.audition_list .school_name {
  color: #FFC834;
  font-size: .373333rem;
  margin-top: .32rem;
}

.audition_list .left {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-right: .5px solid #EFEFEF;
  padding-right: .106667rem;
  width: 60%;
}
.audition_list .right {
  margin-left: .466667rem;
  width: 100%;
}
.audition_list .class_info_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}
.audition_list .icon_class {
  margin-left: .186667rem;
}
.audition_list .right .class_info_item:not(:last-child) {
  width: 50%;
  margin-bottom: .266667rem;
}


.card_name:before {
  content: '';
  width: .453333rem;
  height: .426667rem;
  display: inline-block;
  background: url('../../../assets/img/icon_class.png') 0 0 no-repeat;
  background-size: contain;
  margin-right: .133333rem;
  position: relative;
  top: 2px;
}


</style>

<script>
import avatarBoy from '../../../assets/img/avatarBoy.png'
import avatarGirl from '../../../assets/img/avatarGirl.png'

import screen from '../../assembly/screen.vue'

import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("auditionList");


export default {
  name: 'auditionList',
  data() {
    return {
      jwtAuth: {},
      showSearchChildren: false,
      showBottomArea: false,
      showAllocationPage: false,

      showQrCode: false,
      linkUrl: '',

      loading: false,
      finished: false,
      curPage: 1,

      searchDate: '',

      seachSalesPerson: '',
      showBottomAreaType: '',
      activeNames: [],
      salesPersonRadio: '',
      bottomAreaList: [],

      studentList: [
      ],

      /* 筛选 */
      screenData: {
        startTime: "",
        endTime: "",
        product: '',
        productId: '',
        teacher: '',
        teacherId: '',
        school: '',
        schoolId: '',
      },
      screenList: {
        showSearch: false,
        dateType: 'datetime',
        minDate: new Date(2019, 0, 1),
        data: [
          {
            label: '校区',
            key: 'school',
            checkType: 'checkbox',
            bottomType: 'list',
            options: [],
          },
          {
            label: '课程',
            key: 'product',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '教师',
            key: 'teacher',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '开始时间',
            key: 'startTime',
            checkType: 'date',
            bottomType: 'date',
            options: [],
          },
          {
            label: '结束时间',
            key: 'endTime',
            checkType: 'date',
            bottomType: 'date',
            options: [],
          },
          
        ],
      },
      activeScreenKey: '',
      currentDate: new Date(),
      /* end */
    }
  },

  
  created() {
    this.jwtAuth = JSON.parse(sessionStorage.getItem('jwtAuth'));
    this.queryAllSchool();
    this.initData();

    // console.log(encodeURIComponent(window.location.href));
   
  },
  mounted() {
    this.showBtnAdd = true;
  },
  
  methods: {
    ...mapMutations([
      "updateInfo",
    ]),
    ...mapActions([
      "formGet",
      "post"
    ]),

    

    reset() {
      let data = {};
      this.queryAllProduct(data);
      this.queryAllTeacher(data);
    },

    searchData(data) {
      console.log(data);
      let searchData = {};
      searchData.classStartTime = data.time
      searchData.employeesId = data.teacherId
      searchData.productId = data.productId
      searchData.schoolId = data.schoolId
      searchData.classStartTime = data.startTime
      searchData.classEndTime = data.endTime



      this.screenList.showSearch = false;
      this.initData(searchData)
    },

    initData(searchData) {
      let data = {}
      Object.assign(data, searchData);
      if(data.schoolId) {
        data.schoolId = data.schoolId.split(',');
      }else{
        data.schoolId = [];
      }

      data.pageSize = 50;
      // data.curPage = this.curPage
      // console.log(data.schoolId.split(','))
      
      this.post({
        API: 'selectBmAuditionManagementPageList',
        data: data
      }).then(res => {
        res.data.forEach(item => {
          let productName = [];
          item.productIdList.forEach(item => {
            productName.push(item.productName)
          })

          item.productName = productName;
        })

        this.studentList = res.data;
        
      })
    },

    toUpdateAudition(item, e) {
      // console.log(e.target.className)
      // console.log(e)
      console.log(item);
      if(e.target.className == 'btn_code') {
        this.showQrCode = true;
        let schoolId = item.schoolId;
        let workNo = item.workNo
        this.linkUrl = `http://www.mingxiaoclub.cn/h5evaluate/%23/home?model=0%26type=listenToTheClass%26schoolId=${schoolId}%26workNo=${workNo}`
        return false;
      }
      this.$router.push({
        name: 'addAudition',
        params: {
          type: 'update',
          id: item.auditionMid
        }
      })
    },

    addAudition() {
      this.$router.push({
        name: 'addAudition',
        meta: {
          title: 'bbbbb'
        },
        params: {
          type: 'add'
        }
      })
    },

    onConfirm(value, index) {
      console.log(`当前值：${value.id || value}, 当前索引：${index}`)
      
      this.screenData[this.activeScreenKey] = value;
      this.showBottomArea = false;
    },
    onCancel() {
      this.showBottomArea = false;
    },


    /* ========  筛选组件  =========== */

    schoolChange(data) {
      console.log(data);
      this.queryAllTeacher(data);
      this.queryAllProduct(data);
    },

    queryAllSchool(btnId) {
      let accountId
      this.jwtAuth.schoolId == '' ? accountId = '' : accountId = this.jwtAuth.accountId
      
      this.post({ 
        API: 'queryAllSchool',
        data: {
          accountId: accountId,
          menuId: btnId || 'studentManagement',
          schoolIds: this.jwtAuth.schoolId.split(','),
        }
      }).then(res => {
        res = res.filter(val => {
          return val.schoolId !== '';
        });
        res.map((val) => {
          val.label = val.schoolName;
          val.id = val.schoolId;
        })

        if(btnId) {
          this.powerSchoolList = res
        }else{
          this.schoolList = res
          // this.initData();
        }

        let data = {};
        this.queryAllProduct(data);
        this.queryAllTeacher(data);

        this.screenList.data.forEach(item => {
          if(item.key == 'school') {
            item.options = this.schoolList;
          }
        })


      }).catch(err => {
        this.$toast.fail(err);
      })
    },


    queryAllTeacher(data) {
      let schoolIdList = []
      this.schoolList.forEach(item => {
        schoolIdList.push(item.schoolId);
      })
      
      if(!data.schoolId) {
        data.schoolId = schoolIdList.join(',')
      }else{
        data.schoolId = data.schoolId
      }

      this.formGet({
        API: 'queryPersonBySchoolId',
        data: {
          positionCode: '9',
          schoolId: data.schoolId,
        }
      }).then(res => {
        res.map((val) => {
          val.id = val.employeesId;
          val.label = val.employeesName;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'teacher') {
            item.options = res;
          }
        })
      }).catch(err => {
        this.$toast.fail(err);
      })
    },
    queryAllProduct(data) {

      let schoolIdList = []
      this.schoolList.forEach(item => {
        schoolIdList.push(item.schoolId);
      })
      
      if(!data.schoolId) {
        data.schoolId = schoolIdList.join(',')
      }else{
        data.schoolId = data.schoolId
      }

      console.log(data.schoolId)

      this.formGet({
        API: 'queryProductBySchoolId',
        data: {
          schoolId: data.schoolId,
        }
      }).then(res => {
        res.map((val) => {
          val.id = val.productId;
          val.label = val.productName;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'product') {
            item.options = res;
          }
        })

      }).catch(err => {
        this.$toast.fail(err);
      })
    },

    /* ========  筛选组件 END  =========== */

    
    
  },
  computed: {
    ...mapState([
    ]),
   
  },
  components: {
    screen,
  },
}

</script>